<template>
  <el-container>
    <el-main class="main">
      <h2>高分榜</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="book in topBooks" :key="book.idbook">
          <el-card class="card">
            <h3 @click="viewBook(book.idbook)" class="book-name">{{ book.bookName }}</h3>
            <p>作者: {{ book.penName }}</p>
            <p>点击次数: {{ book.clicks }}</p>
          </el-card>
        </el-col>
      </el-row>

      <h2>其他书籍</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="book in otherBooks" :key="book.idbook">
          <el-card class="card">
            <h3 @click="viewBook(book.idbook)" class="book-name">{{ book.bookName }}</h3>
            <p>作者: {{ book.penName }}</p>
            <p>点击次数: {{ book.clicks }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      topBooks: [],
      otherBooks: []
    };
  },
  created() {
    this.fetchBooks();
  },
  methods: {
    fetchBooks() {
      axios.get('/api/books')
        .then(response => {
          const books = response.data;
          this.topBooks = books.slice(0, 3);
          this.otherBooks = books.slice(3);
        })
        .catch(error => {
          console.error('获取书籍失败:', error);
        });
    },
    viewBook(idbook) {
      this.$router.push({ path: `/read/${idbook}` });
    }
  }
};
</script>

<style scoped>
body {
  background-color: #dff0d8; /* 浅绿色背景 */
  font-family: 'Microsoft YaHei', sans-serif; /* 微软雅黑字体 */
}

.main {
  padding: 20px;
}

h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.card {
  padding: 20px;
  border-radius: 50px; /* 椭圆形 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  opacity: 0.90; /* 设置不透明度为75% */
}

.book-name {
  cursor: pointer;
  color: #2e8b57; /* 深绿色 */
  font-size: 20px;
}

.book-name:hover {
  text-decoration: underline;
}

p {
  margin: 0;
  font-size: 16px;
}
</style>
